<template>
  <div id="echarts"></div>
</template>
<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  onDeactivated,
  onUnmounted,
  markRaw,
  watch,
} from "vue";
import * as echarts from "echarts";
let myChart = ref(null);

let color = ref("");
let gradient = ref("");

let initChart = () => {
  const option = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "axis",
      axisPointer: {},
    },
    grid: {
      containLabel: true,
      bottom: "5%",
      top: "15%",
      left: "3%",
      right: "2%",
    },
    // 工具箱组件  可以另存为图片等功能
    toolbox: {
      right: "40",
      top: "0",
      fontSize: "99",
      show: true,
      itemSize: 18, //工具栏 icon 的大小。
      itemGap: 18,
      feature: {
        mark: { show: true },
        dataView: {
          show: true,
          readOnly: true,
          lang: ["数据试图", "关闭", "刷新"],
          //   textareaLineHeight: "0px",
          buttonColor: "#32c5d2",
          textColor: "#000",
        },
        magicType: {
          show: true,
          type: ["line", "bar", "stack", "tiled"],
        },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      top: 0,
      right: 510,
      data: ["A相电压谐波", "B相电压谐波", "C相电压谐波"],
      itemWidth: 30,
      itemHeight: 18,
      itemGap: 30,
      textStyle: {
        fontSize: 18,
        color: "#686868",
      },
    },
    xAxis: {
      boundaryGap: false, //x 与左边的距离
      // triggerEvent: true,
      data: [
        "2023-10-28",
        "2023-11-28",
        "2023-12-28",
        "2024-01-28",
        "2024-02-28",
      ],
      axisLabel: {
        interval: 0,
        show: true,
        fontSize: 19,
        color: "#333",
        margin: 15,
      },

      axisLine: {
        show: false,
      },
      splitArea: {
        // show: true,
        color: "red",
        //   lineStyle: {
        //     lineStyle: {
        //       color: "#434343", // 坐标轴线线的颜色
        //       width: "15", // 坐标轴线线宽
        //       type: "solid", // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
        //       fontSize: "59",
        //     },
        //   },
      },
    },
    yAxis: [
      {
        name: "单位：%",
        type: "value",
        nameTextStyle: {
          padding: [10, 50, 12, 35],
          color: "#333",
          fontSize: "18",
          fontWeigth: "bolder",
          lineHeight: "50",
        },
        splitNumber: 4,
        axisLabel: {
          show: true,
          fontSize: 21,
          fontWeigth: "400",
          color: "#333",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            type: "dased",
            color: "#434343", //中间线的颜色
            opacity: ".3",
          },
        },
      },
    ],
    series: [
      {
        name: "A相电压谐波",
        type: "line",
        silent: false,
        smooth: true,
        symbol: "none", // 不显示连接点
        itemStyle: {
          normal: {
            color: "#fff87b",
            lineStyle: {
              //线的颜色
              color: "#fff87b",
              width: 1.5,
            },
          },
        },
        barWidth: 20,
        data: [20, 108, 200, 4, 21, 130],
      },
      {
        name: "B相电压谐波",
        type: "line",
        silent: false,
        smooth: true,
        symbol: "none", // 不显示连接点
        itemStyle: {
          normal: {
            color: "#65b988",
            lineStyle: {
              //线的颜色
              color: "#65b988",
              width: 1.5,
            },
          },
        },
        barWidth: 20,
        data: [200, 108, 200, 40, 210, 130],
      },
      {
        name: "C相电压谐波",
        type: "line",
        silent: false,
        smooth: true,
        symbol: "none", // 不显示连接点
        itemStyle: {
          normal: {
            color: "#fd7479",
            lineStyle: {
              //线的颜色
              color: "#fd7479",
              width: 1.5,
            },
          },
        },
        barWidth: 20,
        data: [600, 18, 1200, 240, 10, 130],
      },
    ],
  };
  myChart?.value?.setOption(option);
};
onMounted(() => {
  myChart.value = markRaw(echarts.init(document.getElementById("echarts")));
  initChart();
  window.addEventListener("resize", resize);
});
watch(() => {});
const resize = () => {
  myChart.value.resize();
};
onUnmounted(() => {
  removeEventListener("resize", resize);
});
</script>
<style lang="scss" scoped>
#echarts {
  width: 1460px;
  height: calc(100vh - 500px);
}
</style>
